<template>
    <CommonCard title="今日交易用户数" :value="`${orderUser as number}`">
      <v-chart :option="getOption()" autoresize />
      <template v-slot:bottom>
        <span>退货率</span>
        <span class="emphasis">{{ returnRate + "%" }}</span>
      </template>
    </CommonCard>
  </template>
  
  <script lang="ts">
  export default {
    name: "TodayUsers",
  };
  </script>
  
  <script lang="ts" setup>
  import CommonCard from "./CommonCard.vue";
  import { useDataStore } from "@/stores/reportData";
  import { computed } from "vue";
  
  const dataStore = useDataStore();
  const orderUser = computed(() => dataStore.reportData.orderUser);
  const returnRate = computed(() => dataStore.reportData.returnRate);
  const orderUserTrend = computed(
    () => dataStore.reportData.orderUserTrend || []
  );
  const orderUserTrendAxis = computed(
    () => dataStore.reportData.orderUserTrendAxis || []
  );
  
  const getOption = () => {
    return {
      //x轴的配置
      xAxis: {
        data: orderUserTrendAxis.value, // x轴数据
      },
      //y轴配置
      yAxis: {
        show: false,
      },
      //图标配置
      series: [
        {
          name: "实时交易量", // 图标名称
          //type:bar代表柱状态
          type: "bar",
          // 列表数据(和x轴数据对应)
          data: orderUserTrend.value,
          //柱子的占用他区域的宽度
          barWidth: "10%", // 宽度占用比例
        },
      ],
      // 图表在坐标中显示的位置
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
      },
  
      // 柱的颜色
      color: ["green"],
      // 显示提示
      tooltip: {
        //柱状图的tip触发条件也是axis
        trigger: "axis",
  
        //如果图过小,提示可能会展示在echart区域外,解决方案有如下两种
        //1.设置confine为true:可能会盖住图片
        // confine: true,
        //2.设置position函数,配置tip的位置,函数返回定位
        position: function (
          //鼠标位置的对象,下标为0就是鼠标x轴的位置
          point: any,
          params: any,
          dom: any,
          rect: any,
          //提示框的大小配置对象,内部有一个contentSize代表提示框的宽度
          size: any
        ) {
          // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
          // 提示框位置
          let x = 0; // x坐标位置
  
          // 当前鼠标位置
          let pointX = point[0];
          let pointY = point[1];
  
          // 提示框大小
          let boxWidth = size.contentSize[0];
  
          // boxWidth > pointX 说明鼠标左边放不下提示框
          if (boxWidth > pointX) {
            x = 5;
          } else {
            // 左边放的下
            x = pointX - boxWidth;
          }
  
          return [x, -90 + pointY];
        },
      },
    };
  };
  </script>
  
  <style lang="scss" scoped></style>
  